<template>
  <div class="treeselect" ref="select">
    <div class="treeselect-option" @click="show=!show" :class="{height40:isHeight}">
      <span v-if="!select.checkName" :class="{fontSize:isHeight}">{{title}}</span>
      <span v-else :class="{fontSize:isHeight}">{{select.checkName}}</span>
      <i class="el-icon-caret-bottom" style="float:right;" :class="{height50:isHeight}"></i>
      <div v-if='displayLine' style="clear:both"></div>
    </div>
    <div class="treeselect-content" v-show="show" :class="{marTop:isHeight}">
      <div>
        <!-- 传入的type 为 1 是多选 -->
        <el-tree v-if="type === 1 " :data="data" show-checkbox node-key="id" :props="children" @check="savenode" ref="treeselect" >
        </el-tree>
        <!-- 传入的type 为 2 是单选 -->
        <el-tree v-if="type === 2 " :data="data" show-checkbox node-key="id" :props="children" ref="treeselect" @check-change="orgCheckChange" :check-strictly="true">
        </el-tree>
        <div>
          <el-button type="primary" size="mini" class="treeselect-btn" @click="chooseDepartment">确定</el-button>
          <el-button type="default" size="mini" class="treeselect-btn" @click="show = false">取消</el-button>
          <el-button type="default" size="mini" class="treeselect-btn" @click="clearData">清空</el-button>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'treeSelect',
  // props: ["data", "type", "title", "isHeight"],
  props: {
    data: {
      type: Array
    },
    type: {
      type: String
    },
    title: {
      type: String
    },
    isHeight: {
      type: String
    },
    displayLine: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show: false,
      select: {
        checkedarray: [],
        currentchecked: {},
        checkName: ''
      },
      children: {
        children: 'children',
        label: 'name'
      },
      // checkName: '',
      getCheckedKeysName: []
    }
  },
  watch: {
    '$route.name': 'fetchData'
  },
  mounted() {},

  methods: {
    fetchData() {
      // this.checkName = ''
      this.select.checkName = ''
      this.$refs.treeselect.getCheckedNodes(true).forEach(item => {
        this.$refs.treeselect.setChecked(item, false)
      })
      this.show = false
    },
    orgCheckChange(data, checked, indeterminate) {
      this.getCheckedKeysName = []
      // if (data.hasOwnProperty('children')) {
      //   if (data.children.length !== 0) {
      //     this.$message({
      //       message: '请选择子级节点',
      //       type: 'error',
      //       showClose: true
      //     })
      //     this.$refs.treeselect.setChecked(data, false)
      //     return
      //   }
      // }
      if (this.$refs.treeselect.getNode(data).level !== 4) {
        this.$message({
          message: '请选择栏目',
          type: 'error',
          showClose: true
        })
        this.$refs.treeselect.setChecked(data, false)
        return
      }
      const indexs = this.select.checkedarray.indexOf(data.id)
      if (indexs < 0 && this.select.checkedarray.length === 1 && checked) {
        this.$message({
          message: '只能选择一个栏目',
          type: 'error',
          showClose: true
        })
        this.$refs.treeselect.setChecked(data, false)
      } else if (this.select.checkedarray.length === 0 && checked) {
        this.select.checkedarray = []
        this.select.checkedarray.push(data.id)
      } else if (
        indexs >= 0 &&
        this.select.checkedarray.length === 1 &&
        !checked
      ) {
        this.select.checkedarray = []
      }
    },
    savenode: function(data, node) {
      this.getCheckedKeysName = []
      this.select.checkedarray = node.checkedKeys
      this.select.currentchecked = data
    },
    clearData() {
      this.checkName = ''
      this.select.checkedarray = []
    },
    chooseDepartment() {
      console.log(this.$refs.treeselect.getCheckedNodes(true))
      if (this.$refs.treeselect.getCheckedNodes(true).length === 0) {
        // this.checkName = '';
        this.select.checkName = ''
        this.select.checkedarray = []
      } else {
        this.$refs.treeselect.getCheckedNodes(true).forEach(item => {
          this.getCheckedKeysName.push(item.name)
          this.$refs.treeselect.setChecked(item, false)
        })
        // this.checkName = this.getCheckedKeysName.join('、')
        this.select.checkName = this.getCheckedKeysName.join('、')
      }
      this.show = false
      this.$emit('choose')
    }
  }
}
</script>

<style scoped>
.treeselect {
  border: 1px #ddd solid;
  /* margin-bottom: 30px; */
}
.treeselect-option {
  height: 30px;
  padding: 0 10px;
}
.treeselect-content {
  position: relative;
  max-height: 300px;
  overflow: auto;
}
.treeselect-option i,
span {
  line-height: 30px;
  font-size: 12px;
  color: #c1c5d2;
}
.treeselect-option > div {
  border-top: 1px #ddd solid;
}
.treeselect-btn {
  margin: 5px !important;
  float: right;
}
.height40 {
  height: 38px;
  line-height: 38px;
}
.treeselect .treeselect-option .height50 {
  line-height: 38px;
  font-size: 14px;
}
.treeselect .treeselect-option .fontSize {
  font-size: 14px;
}
.treeselect .treeselect-option span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90%;
}
.treeselect-option i[data-v-22699ac0], span[data-v-22699ac0]{
  line-height: 28px;
}
.marTop {
  /* margin-top: 11px; */
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
